<template>
	<view>
		<view class="container">
			<video ref="videoRef" id="myVideo" style="width: 100%" :show-fullscreen-btn="false"
				:style="{height:`calc(100vh - ${ktxStatusHeight+'px'})`}" :src="video" :controls="true">
				<slot name="myvideo"></slot>
			</video>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['video', 'changestate'],
		name: "MyVideo",
		data() {
			return {
				videoContext: null,
				ktxStatusHeight: 0,
				tabBarHeight: 0
			};
		},
		watch: {
			changestate(newval) {
				// console.log(newval)
				this.videoContext.pause()
			}
		},
		onReady() {
			this.videoContext = uni.createVideoContext("myVideo", this)
		},
		mounted() {
			this.videoContext = uni.createVideoContext("myVideo", this)
			let systemInfo = uni.getSystemInfoSync()
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			this.ktxStatusHeight = systemInfo.statusBarHeight * pxToRpxScale
		},
		methods: {

		}
	}
</script>

<style>

</style>